<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="" :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar style="width: 750rpx; height: 44px;" color="#FDFDFD" :border="false" :shadow="false" background-color="#CD001B" @clickRight="showSetUp">
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<!-- 		<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view> -->
				<view slot="right"><uni-icons type="bars" color="#FDFDFD" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>
		<view class="bigBox" :style="{ position: 'relative', top: topBarHeight + 40 + 'px' }">
			<view class="bgColor"></view>
			<view class="posCard">
				<view class="userBox">
					<view class="userBoxTop">
						<view style="color: #283A7D;">{{ i18n.ctwfont7 }} :</view>
						<view class="userTaxt">{{ cardArrList.customerCode }}</view>
					</view>
					<!-- 					<uni-row class="userBoxBottom" :gutter="40">
						<uni-col :span="8">
							<view class="userBoxBottomText">{{ cardArrList.balance }}</view>
							<view class="userBoxBottomLine"></view>
							<view>{{ i18n.ctwfont8 }}</view>
						</uni-col>
						<uni-col :span="8">
							<view class="userBoxBottomText">{{ cardArrList.overdraft }}</view>
							<view class="userBoxBottomLine"></view>
							<view>{{ i18n.ctwfont9 }}</view>
						</uni-col>
						<uni-col :span="8">
							<view class="userBoxBottomText">{{ cardArrList.availableCreditBalance }}</view>
							<view class="userBoxBottomLine"></view>
							<view>{{ i18n.ctwfont10 }}</view>
						</uni-col>
					</uni-row> -->
				</view>
				<view class="listBox">
					<uni-grid :column="3" :showBorder="false" :square="false" @change="goUrl">
						<uni-grid-item :index="item.id" v-for="item in gridList" :key="item.id" style="margin-bottom: 30px;">
							<view class="gridBoxText">
								<image style="width: 30px; height: 30px;" mode="scaleToFill" :src="item.img"></image>
								<view class="gridBoxTitle">{{ item.text }}</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
		</view>
		<!-- 账号切换 -->
		<uni-popup ref="accountPopup" type="center" :animation="false">
			<scroll-view class="accountPopupBox" scroll-y="true" :show-scrollbar="false" @scroll="scroll" scroll-top="0">
				<view
					class="accountPopupBoxItem"
					:style="{ color: item === cardArrList.customerCode ? '#283A7D' : '#CBCBCB' }"
					v-for="item in customerList"
					:key="item"
					@tap="accountChange(item)"
				>
					<view>{{ i18n.ctwfont7 }}：</view>
					<view style="font-weight: 700;">{{ item }}</view>
				</view>
			</scroll-view>
			<!-- <view class="accountPopupBox"></view> -->
		</uni-popup>
		<!-- 支付历史 -->
		<uni-popup ref="historyPopup" type="center" :animation="false">
			<scroll-view class="accountPopupBox" scroll-y="true" :show-scrollbar="false" @scroll="scroll" scroll-top="0">
				<!-- :style="{ color: item ? '#283A7D' : '#CBCBCB' }" -->
				<view class="accountPopupBoxItem" v-for="item in historyPopupList" :key="item.id" @tap="historyChange(item)">
					<view style="font-weight: 700;">{{ item.title }}</view>
				</view>
			</scroll-view>
			<!-- <view class="accountPopupBox"></view> -->
		</uni-popup>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
		<lb-tabbar ref="tabbar" :value="$store.state.tabActive" :animate="$store.state.animate" :placeholder="true">
			<lb-tabbar-item
				v-for="item in $store.state.tabbars"
				:key="item.pagePath"
				:name="item.pagePath"
				:icon="item.iconPath"
				:selectedIconPath="item.selectedIconPath"
				:dot="item.dot"
				:info="item.info"
				:raisede="item.raisede"
				icon-prefix="iconfont"
				@click="handleTabbarItemClick"
			>
				{{ item.text }}
			</lb-tabbar-item>
		</lb-tabbar>
	</view>
</template>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import { getStorage, setStorage } from '@/utils/setStorage.js';
import { codeMapFun } from '@/utils/codeMap.js';
import baseFont from '@/utils/baseFont.js';
// tababr
import lbTabbar from '@/pages/lb-tabbar/lb-tabbar.vue';
import lbTabbarItem from '@/pages/lb-tabbar/lb-tabbar-item.vue';
export default {
	extends: baseFont,
	data: function() {
		return {
			windowHeight: 0,
			windowWidth: 0,
			topBarHeight: 0,
			cardArrList: {
				customerCode: '',
				overdraft: 0,
				balance: 0,
				materialAmount: 0,
				availableCreditBalance: 0
			},
			switch: true,
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			customerList: [], // 客户代号
			gridList: [
				{
					id: 1,
					text: this.$t('me').ctwfont0,
					url: '/pages/maps/index',
					img: '/static/icon/OneDrive_5_11-16-2021/2x/me6@2x.png',
					type: 'orderInfo'
				},
				{
					id: 2,
					text: this.$t('me').ctwfont21,
					url: '/pages/me/modifyPhone',
					img: '/static/icon/OneDrive_5_11-16-2021/2x/me7@2x.png',
					type: '',
					children: [
						{
							id: 1,
							title: this.$t('me').ctwfont1,
							url: '/pages/me/modifyPhone',
							type: 'paymentInfo'
						},
						{
							id: 2,
							title: this.$t('me').ctwfont22,
							url: '/pages/me/modifyPhoneTwo',
							type: 'freightInfo'
						},
						{
							id: 3,
							title: this.$t('me').ctwfont23,
							url: '/pages/me/shippingFeeDetail',
							type: 'freightDetail'
						}
					]
				},
				{
					id: 3,
					text: this.$t('me').ctwfont2,
					url: '/pages/me/personal',
					img: '/static/icon/OneDrive_5_11-16-2021/2x/me5@2x.png',
					type: 'remittanceHistory'
				},
				// {
				// 	id: 4,
				// 	text: this.$t('me').ctwfont3,
				// 	url: '/pages/me/modifyMail',
				// 	img: '/static/icon/OneDrive_5_11-16-2021/2x/me4@2x.png',
				// 	type: 'customerInfo'
				// },
				// {
				// 	id: 5,
				// 	text: this.$t('me').ctwfont4,
				// 	url: '/pages/me/modifyMM',
				// 	img: '/static/icon/OneDrive_5_11-16-2021/2x/me2@2x.png'
				// },
				{
					id: 6,
					text: this.$t('me').ctwfont5,
					url: '/pages/formPages/index',
					img: '/static/icon/OneDrive_5_11-16-2021/2x/me1@2x.png',
					type: 'priceInfo'
				},
				// {
				// 	id: 7,
				// 	text: this.$t('me').ctwfont6,
				// 	url: '/pages/me/modifyName',
				// 	img: '/static/icon/OneDrive_5_11-16-2021/2x/me3@2x.png',
				// 	type: ''
				// },
				{
					id: 9,
					text: this.$t('me').ctwfont12,
					url: '',
					img: '/static/icon/OneDrive_5_11-16-2021/2x/customerCode.png',
					type: ''
				},
				// {
				// 	id: 8,
				// 	text: this.$t('me').ctwfont11,
				// 	url: '/pages/logins/modifyMMTwo',
				// 	img: '/static/icon/OneDrive_5_11-16-2021/2x/icon_set_up.png',
				// 	type: ''
				// }
			]
		};
	},
	components: { setUpPages, signOut, lbTabbar, lbTabbarItem },
	onShow() {
		this.getList();
		this.gridList = this.gridListArr();
	},
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.windowWidth = res.windowWidth;
				that.windowHeight = res.windowHeight;
				that.topBarHeight = res.statusBarHeight;
			}
		});
	},
	onHide() {
		this.$refs.SetUpPopup.close();
		this.popupIsShow = false;
		this.$refs.signOutBox.close();
	},
	watch: {
		i18n: {
			deep: true,
			handler(newVal, oldVal) {
				this.$nextTick(function() {
					this.gridList = this.gridListArr();
				});
			}
		}
	},
	computed: {
		i18n() {
			return this.$t('me');
		},
		// 支付历史
		historyPopupList() {
			// let arr = [
			// 	{
			// 		id: 1,
			// 		title: this.$t('me').ctwfont1,
			// 		url: '/pages/me/modifyPhone',
			// 		type: 'paymentInfo'
			// 	},
			// 	{
			// 		id: 2,
			// 		title: this.$t('me').ctwfont22,
			// 		url: '/pages/me/modifyPhoneTwo',
			// 		type: 'freightInfo'
			// 	},
			// 	{
			// 		id: 3,
			// 		title: this.$t('me').ctwfont23,
			// 		url: '/pages/me/shippingFeeDetail',
			// 		type: 'freightDetail'
			// 	}
			// ];
			// return arr;
			const arr = this.gridList.find(item => item.children && item.children.length > 0);
			if (arr && arr.children) {
				return arr.children;
			} else {
				return [];
			}
		}
	},
	methods: {
		handleTabbarItemClick(e) {
			const token = getStorage('token');
			if (token === undefined || token === null || token === '') {
				let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
				let currentParam = currentRoutes[currentRoutes.length - 1].options; //获取路由参数
				// 拼接参数
				let param = '';
				for (let key in currentParam) {
					param += '?' + key + '=' + currentParam[key];
				}
				let localRoute = '/' + currentRoute + param;
				if (e.name == localRoute) {
					return false;
				} else {
					if (e.name === '/pages/businessCard/index' || e.name === '/pages/home/index') {
						// #ifdef APP-PLUS
						uni.redirectTo({
							url: e.name
						});
						// #endif
						// #ifdef H5
						this.$Router.push(e.name);
						// #endif
					} else {
						// #ifdef APP-PLUS
						uni.redirectTo({
							url: '/pages/home/index'
						});
						// #endif
						// #ifdef H5
						this.$Router.push('/pages/home/index');
						// #endif
					}
				}
			} else {
				// this.$store.state.tabActive = e.name;
				let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
				let currentParam = currentRoutes[currentRoutes.length - 1].options; //获取路由参数
				// 拼接参数
				let param = '';
				for (let key in currentParam) {
					param += '?' + key + '=' + currentParam[key];
				}
				let localRoute = '/' + currentRoute + param;
				if (e.name == localRoute) {
					return false;
				} else {
					// #ifdef APP-PLUS
					uni.redirectTo({
						url: e.name
					});
					// #endif
					// #ifdef H5
					this.$Router.push(e.name);
					// #endif
				}
			}
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				if (this.popupIsShow) {
					this.$refs.SetUpPopup.close();
					this.popupIsShow = false;
				} else if (this.signOutShow) {
					this.$refs.signOutBox.close();
					this.signOutShow = false;
				} else {
					let main = plus.android.runtimeMainActivity();
					if (this.back_k > 0) {
						this.back_k = 0;
						return main.moveTaskToBack(false);
						// return plus.runtime.quit();
					} else {
						const pages = getCurrentPages();
						if (pages.length === 1) {
							this.back_k++;
							setTimeout(() => {
								this.back_k--;
							}, 1000);
							// uni.showToast({
							// 	title: '再按一次退出应用',
							// 	icon: 'none',
							// 	duration: 1000
							// });
						}
					}
				}
			}
		},
		getCID() {
			const geTuiCid = getApp().globalData.pushClientId;
			return geTuiCid;
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
		},
		// 获取数据
		async getList() {
			const user = JSON.parse(getStorage('userconter'));
			this.cardArrList = {
				customerCode: user.customerCode,
				overdraft: 0,
				balance: 0,
				materialAmount: 0,
				availableCreditBalance: 0
			};
			// const params = {
			// 	customerCode: user.customerCode,
			// 	beginDate: this.formatDate(new Date()),
			// 	endDate: this.formatDate(new Date())
			// };
			// const { data: res } = await this.$http(true, 'api/E3/paymentFreight', params, 'GET');
			// if (res.errno === 0) {
			// 	if (res.data) {
			// 		this.cardArrList = res.data;
			// 	} else {
			// 		this.cardArrList = {
			// 			customerCode: user.customerCode,
			// 			overdraft: 0,
			// 			balance: 0,
			// 			materialAmount: 0,
			// 			availableCreditBalance: 0
			// 		};
			// 	}
			// } else {
			// 	const err = codeMap.find(item => item[res.errno]);
			// 	if (err) {
			// 		uni.showToast({
			// 			title: err[res.errno],
			// 			icon: 'none',
			// 			position: 'top'
			// 		});
			// 	} else {
			// 		uni.showToast({
			// 			title: res.errmsg,
			// 			icon: 'none',
			// 			position: 'top'
			// 		});
			// 	}
			// }
		},
		// 获取客户数据
		async getCustomerList() {
			const user = JSON.parse(getStorage('userconter'));
			const params = {
				idCard: user.idCard
			};
			const { data: res } = await this.$http(true, 'api/E3/customer/customerCodeList', params, 'GET');
			if (res.errno === 0) {
				if (res.data) {
					this.customerList = res.data;
				} else {
					this.customerList = [user.customerCode];
				}
				this.$refs.accountPopup.open();
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 切换客户代号
		async accountChange(e) {
			if (e !== this.cardArrList.customerCode) {
				const user = JSON.parse(getStorage('userconter'));
				user.customerCode = e;
				setStorage('userconter', JSON.stringify(user));
				setTimeout(() => {
					this.getList();
					this.$refs.accountPopup.close();
				}, 200);
				// const params = {
				// 	customerCode: 'KGG/11'
				// };
				// console.log(params);
				// const { data: res } = await this.$http(true, `api/E3/customer/updateCustomerCode?customerCode=${e}`, '', 'POST');
				// if (res.errno === 0) {
				// 	const user = JSON.parse(getStorage('userconter'));
				// 	user.customerCode = e;
				// 	setStorage('userconter', JSON.stringify(user));
				// 	setTimeout(() => {
				// 		this.getList();
				// 		this.$refs.accountPopup.close();
				// 	}, 200);
				// } else {
				// 	uni.showToast({
				// 		title: res.errmsg,
				// 		icon: 'none',
				// 		position: 'top'
				// 	});
				// }
			}
		},
		// 切换客代号滚动事件
		scroll() {},
		// 时间处理
		formatDate(value) {
			const dt = new Date(value);
			const y = dt.getFullYear();
			const m = (dt.getMonth() + 1 + '').padStart(2, 0);
			const d = (dt.getDate() + '').padStart(2, 0);
			return `${y}-${m}-${d}`;
		},
		goUrl(e) {
			const id = e.detail.index;
			const item = this.gridList.find(item => id === item.id);
			if (item) {
				if (item.id === 1) {
					// #ifdef APP-PLUS
					uni.redirectTo({
						url: item.url
					});
					// #endif
					// #ifdef H5
					this.$Router.push(item.url);
					// #endif
				} else if (item.id === 2) {
					this.$refs.historyPopup.open();
					// // #ifdef APP-PLUS
					// uni.redirectTo({
					// 	url: item.url
					// });
					// // #endif
					// // #ifdef H5
					// this.$Router.push(item.url);
					// // #endif
				} else if (item.id === 3) {
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: item.url
					});
					// #endif
					// #ifdef H5
					this.$Router.push(item.url);
					// #endif
				} else if (item.id === 4) {
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: item.url
					});
					// #endif
					// #ifdef H5
					this.$Router.push(item.url);
					// #endif
				} else if (item.id === 5) {
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: item.url
					});
					// #endif
					// #ifdef H5
					this.$Router.push(item.url);
					// #endif
				} else if (item.id === 6) {
					// #ifdef APP-PLUS
					uni.redirectTo({
						url: item.url + '?url=/pages/me/index'
					});
					// #endif
					// #ifdef H5
					this.$Router.push(item.url + '?url=/pages/me/index');
					// #endif
				} else if (item.id === 7) {
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: item.url
					});
					// #endif
					// #ifdef H5
					this.$Router.push(item.url);
					// #endif
				} else if (item.id === 8) {
					// #ifdef APP-PLUS
					uni.redirectTo({
						url: item.url
					});
					// #endif
					// #ifdef H5
					this.$Router.push(item.url);
					// #endif
				} else if (item.id === 9) {
					this.getCustomerList();
				} else if (item.id === 10) {
					// // #ifdef APP-PLUS
					// uni.navigateTo({
					// 	url: item.url
					// });
					// // #endif
					// // #ifdef H5
					// this.$Router.push(item.url);
					// // #endif
				}
			}
		},
		historyChange(item) {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: item.url
			});
			// #endif
			// #ifdef H5
			this.$Router.push(item.url);
			// #endif
			this.$refs.historyPopup.close();
			// if (item.id == 1) {
			// 	// #ifdef APP-PLUS
			// 	uni.redirectTo({
			// 		url: item.url
			// 	});
			// 	// #endif
			// 	// #ifdef H5
			// 	this.$Router.push(item.url);
			// 	// #endif
			// } else {
			// 	console.log(item);
			// }
		},
		gridListArr() {
			let arr = [
				{
					id: 1,
					text: this.$t('me').ctwfont0,
					url: '/pages/maps/index',
					img: '/static/icon/OneDrive_5_11-16-2021/2x/me6@2x.png',
					type: 'orderInfo'
				},
				{
					id: 2,
					text: this.$t('me').ctwfont21,
					url: '/pages/me/modifyPhone',
					img: '/static/icon/OneDrive_5_11-16-2021/2x/me7@2x.png',
					type: '',
					children: [
						{
							id: 1,
							title: this.$t('me').ctwfont1,
							url: '/pages/me/modifyPhone',
							type: 'paymentInfo'
						},
						{
							id: 2,
							title: this.$t('me').ctwfont22,
							url: '/pages/me/modifyPhoneTwo',
							type: 'freightInfo'
						},
						{
							id: 3,
							title: this.$t('me').ctwfont23,
							url: '/pages/me/shippingFeeDetail',
							type: 'freightDetail'
						}
					]
				},
				{
					id: 3,
					text: this.$t('me').ctwfont2,
					url: '/pages/me/personal',
					img: '/static/icon/OneDrive_5_11-16-2021/2x/me5@2x.png',
					type: 'remittanceHistory'
				},
				// {
				// 	id: 4,
				// 	text: this.$t('me').ctwfont3,
				// 	url: '/pages/me/modifyMail',
				// 	img: '/static/icon/OneDrive_5_11-16-2021/2x/me4@2x.png',
				// 	type: 'customerInfo'
				// },
				// {
				// 	id: 5,
				// 	text: this.$t('me').ctwfont4,
				// 	url: '/pages/me/modifyMM',
				// 	img: '/static/icon/OneDrive_5_11-16-2021/2x/me2@2x.png'
				// },
				{
					id: 6,
					text: this.$t('me').ctwfont5,
					url: '/pages/formPages/index',
					img: '/static/icon/OneDrive_5_11-16-2021/2x/me1@2x.png',
					type: 'priceInfo'
				},
				// {
				// 	id: 7,
				// 	text: this.$t('me').ctwfont6,
				// 	url: '/pages/me/modifyName',
				// 	img: '/static/icon/OneDrive_5_11-16-2021/2x/me3@2x.png',
				// 	type: ''
				// },
				{
					id: 9,
					text: this.$t('me').ctwfont12,
					url: '',
					img: '/static/icon/OneDrive_5_11-16-2021/2x/customerCode.png',
					type: ''
				},
				// {
				// 	id: 8,
				// 	text: this.$t('me').ctwfont11,
				// 	url: '/pages/logins/modifyMMTwo',
				// 	img: '/static/icon/OneDrive_5_11-16-2021/2x/icon_set_up.png',
				// 	type: ''
				// }
			];
			const jurisdiction = getStorage('jurisdiction');
			if (jurisdiction) {
				const obj = JSON.parse(jurisdiction);
				for (let i in obj) {
					const num = arr.findIndex(item => item.type == i && obj[i] == 1);
					const num2 = arr.find(item => item.id == 2 && item.children);
					if (num != -1) {
						arr.splice(num, 1);
					}
					if (num2.children && num2.children.length > 0) {
						const num3 = num2.children.findIndex(item => item.type == i && obj[i] == 1);
						if (num3 != -1) {
							num2.children.splice(num3, 1);
						}
					}
				}
			}
			const num4 = arr.findIndex(item => item.children && item.children.length == 0);
			if (num4 != -1) {
				arr.splice(num4, 1);
			}
			return arr;
		}
	}
};
</script>

<style lang="scss" scoped>
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #CD001B;
		width: 100%;
	}
	.titleImg {
		width: 60px;
		height: 30px;
		margin: 0 auto;
		border-radius: 50%;
		overflow: hidden;
	}
	.leftIconBox {
		width: 25px;
		height: 25px;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 15px;
	}
}
.bigBox {
	.bgColor {
		width: 750rpx;
		// height: 200px;
		height: 80px;
		background: linear-gradient(180deg, #CD001B 0%, #E23E4D 100%);
		border-bottom-right-radius: 10%;
		border-bottom-left-radius: 10%;
	}
	.posCard {
		position: absolute;
		top: 15%;
		left: 50%;
		transform: translateX(-50%);
		width: 700rpx;
		.userBox {
			// border-radius: 10px;
			// background-color: #ffffff;
			.userBoxTop {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 40px;
				border-radius: 5px;
				background-color: #ffffff;
				.userTaxt {
					color: #038a15;
					font-weight: 700;
					margin-left: 10px;
					font-size: $uni-font-size-custom-e;
				}
			}
			.userBoxBottom {
				padding: 0 15px;
				margin-top: 40px;
				font-size: $uni-font-size-custom-e;
				color: #dadde8;
				text-align: center;
				font-size: $uni-font-size-custom-d;
				.userBoxBottomText {
					font-size: $uni-font-size-custom-d;
				}
				.userBoxBottomLine {
					height: 1px;
					background-color: #b21536;
					margin: 5px 10px;
				}
			}
		}
		.listBox {
			position: absolute;
			// top: 190px;
			top: 90px;
			width: 100%;
			// margin-top: 35px;
			border-radius: 3px;
			background-color: #fbfbfb;
			padding: 30px 0 10px 0;
			box-shadow: 0px 3px 10px 0px #e0e0e0;
			.gridBoxText {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				text-align: center;

				.gridBoxTitle {
					max-width: 120px;
					font-size: $uni-font-size-custom-d;
					color: #434552;
					margin-top: 10px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2; //多行在这里修改数字即可
					overflow: hidden;
					-webkit-box-orient: vertical;
					word-wrap: break-word; // 自动换行
					word-break: normal; // 自动换行
				}
			}
		}
	}
}
.accountPopupBox {
	width: 705rpx;
	min-height: 50px;
	max-height: 305px;
	background-color: #fff;
	border-radius: 5px;
	padding: 0 15px;
	box-sizing: border-box;
	overflow-y: scroll;
	.accountPopupBoxItem {
		height: 50px;
		color: #283a7d;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 1px solid #cbcbcb;
	}
	.accountPopupBoxItem:last-child {
		border-bottom: none;
	}
}
</style>
